<template>
  <div class="layout">
    <el-container>
      <el-aside width="200px">
          <v-side></v-side>
      </el-aside>
      <el-container>
        <el-header>
            <v-header></v-header>
        </el-header>
        <el-main>
            <!-- 中间会变的路由 -->
            <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import vSide from '../components/vside.vue'
import vHeader from '../components/vheader.vue'
export default {
    components:{
        vSide,
        vHeader
    },
};
</script>
<style scoped>
.el-header{
    background-color: white;
    color: #333;
  }
  
  .el-aside {
    background-color: rgb(38,42,50);
    color: #333;
    height: 100vh;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
    height: 100vh;
  }
</style>